<template>
	<view>
		<view class="tn-padding-sm">
			<view v-show="total">
				<block v-for="(item, index) in list" :key="index">
					<uni-card class="card" :isFull="true" @click="toDetail(item)">
						<text class="uni-body">
							<view>
								<text style="line-height: 2em; color: #3a3a3a" class="label tn-text-xl tn-text-bold">编号：{{ item.recNum }}</text>
							</view>
							<view>
								<text class="label">
									当事人：
									<text class="value">{{ item.caller }} {{ item.telephone }}</text>
								</text>
							</view>
							<view>
								<text class="label">
									救援事件：
									<text class="value">
										{{ item.occutTime }}{{ item.highSpeed }}{{ item.direction }}K{{ item.startPoint }}+{{ item.endPoint }}处一辆车发生{{
											item.accidentType
										}}。
									</text>
								</text>
							</view>
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<tn-tag
									class="tn-padding-sm"
									style="border-radius: 6px"
									width="auto"
									shape="radius"
									fontColor="tn-color-white"
									:backgroundColor="item.accidentType === '车辆故障' ? 'tn-bg-green' : 'tn-bg-red'"
								>
									{{ item.accidentType }}
								</tn-tag>
								<view>
									<text class="label">
										进度：
										<text class="value">{{ item.progress }}/6</text>
									</text>
								</view>
							</view>
						</text>
					</uni-card>
				</block>
				<view class="tn-margin-sm tn-padding-bottom-sm">
					<uni-pagination :total="total" v-model="query.pageNum" :pageSize="query.pageSize" @change="load"></uni-pagination>
				</view>
			</view>
		</view>

		<view class="add-btn tn-main-gradient-blue tn-shadow-gray" @click="toAdd">
			<view class="tn-icon-add tn-text-xxl" />
		</view>
	</view>
</template>

<script>
import { onMounted } from 'vue';
import { listJyBase } from '@/api/rescue.js';
export default {
	data() {
		return {
			query: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			list: []
		};
	},
	onShow() {
		setTimeout(uni.startPullDownRefresh,500)
	},
	onPullDownRefresh() {
		this.load();
	},
	onUnload() {
		let list = getApp().globalData.apiList;
		try {
			list.values().forEach(item=>item.abort())
		} catch (error) {
			//TODO handle the exception
		}
	},
	onHide() {
		let list = getApp().globalData.apiList;
		try {
			list.values().forEach(item=>item.abort())
		} catch (error) {
			//TODO handle the exception
		}
	},
	methods: {
		load() {
			listJyBase(this.query).then((res) => {
				this.total = res.total;
				this.list = res.rows;
			}).finally(()=>{
				uni.stopPullDownRefresh()
			});
		},
		toDetail(item) {
			uni.setStorage({
				key: 'TIANBAOID',
				data: item.id
			});
			uni.setStorage({
				key: 'TIANBAOINFO',
				data: item
			});
			uni.navigateTo({
				url: '/pages/rescue/add/add?jyBaseId='+item.id
			});
		},
		toAdd() {
			uni.removeStorage({
				key: 'TIANBAOID'
			});
			uni.navigateTo({
				url: '/pages/rescue/add/juanzong'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.card {
	margin: 0 !important;
	border-radius: 6px;
	margin-top: 15px !important;

	::v-deep {
		.uni-card__header {
			.uni-card__header-box {
				.uni-card__header-content-title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		.title {
			color: #333;
			line-height: 1.5em;
			font-size: 32rpx;
			font-weight: bold;
		}

		view {
			padding: 2px;
			line-height: 2em;
		}

		.value {
			color: $tn-color-gray;
		}
	}
}

.add-btn {
	position: fixed;
	right: 40rpx;
	bottom: 100rpx;
	border-radius: 50%;
	padding: 30rpx;
}
.empty{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
}
</style>
